<template>
  <div id="app">

    <router-link to="/about">About</router-link>
    <router-link to="/index">index</router-link>
    <router-link to="/api">api</router-link>


<!--    <nav>-->
<!--      <router-link to="/">Home</router-link> |-->
<!--      <router-link to="/about">About</router-link>-->
<!--    </nav>-->

<!-- 5.预留展示区域   -->
    <router-view/>
  </div>
</template>

<style lang="less">

//路由高亮
.router-link-active {
  font-size: 40px;
  color: red;
}

.activeLink {
  color: green;
  font-weight: bold;
  font-size: 20px;
}




//#app {
//  font-family: Avenir, Helvetica, Arial, sans-serif;
//  -webkit-font-smoothing: antialiased;
//  -moz-osx-font-smoothing: grayscale;
//  text-align: center;
//  color: #2c3e50;
//}
//
//nav {
//  padding: 30px;
//
//  a {
//    font-weight: bold;
//    color: #2c3e50;
//
//    &.router-link-exact-active {
//      color: #42b983;
//    }
//  }
//}
</style>
